<route lang="json5" type="game">
{
  style: {
    navigationBarTitleText: '轨道音乐',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-button" @click="handleBack">
        <wd-icon name="arrow-left" size="40rpx"></wd-icon>
        <text class="back-text">{{ gameName }}</text>
      </view>
      <image :src="userInfo.avatar || '/static/images/default-avatar.png'" class="avatar-icon" />
    </view>
    <!-- 搜索框 -->
    <view class="search-container">
      <wd-search
        v-model="searchValue"
        hide-cancel
        placeholder="请输入关键词搜索"
        placeholder-left
        background="transparent"
        input-background="rgba(255, 255, 255, 0.1)"
        placeholder-color="rgba(255, 255, 255, 0.5)"
        text-color="#ffffff"
        shape="round"
        search-icon-color="#ffffff"
        clear-icon-color="#999"
        @search="handleSearch"
        @clear="handleClear"
      />
      <view class="search-button" @click="handleSearch">
        <wd-icon name="search" size="30rpx"></wd-icon>
      </view>
    </view>
    <view class="tab-container">
      <!-- 分类标签 -->
      <wd-tabs v-model="activeTab" @change="handleTabChange">
        <wd-tab title="全部"></wd-tab>
        <wd-tab title="蓝晶区"></wd-tab>
        <wd-tab title="红晶区"></wd-tab>
        <wd-tab title="黄晶区"></wd-tab>
      </wd-tabs>
      <image src="/static/images/game/gameRule.png" class="game-rule" @click="handleRules" />
    </view>

    <!-- 游戏房间网格 -->
    <view class="room-grid">
      <view class="room-row" v-for="row in roomsData" :key="row.index">
        <view
          class="room-card"
          v-for="room in row.rooms"
          :key="room.id"
          :class="[room.roomType]"
          @click="handleRoomClick(room)"
        >
          <view class="room-content">
            <!-- 左侧能量棒 -->
            <view class="energy-bar">
              <image :src="getEnergyBarIcon(room.roomType)" mode="aspectFit" />
            </view>

            <!-- 中间信息 -->
            <view class="room-info">
              <view class="room-name">{{ room.roomName }}</view>
              <view
                class="room-status"
                :class="{ ongoing: room.state === '进行中', full: room.state === '满员' }"
              >
                ({{ room.state }})
              </view>
              <view class="room-progress">围观: {{ room.watcherNum }}</view>
            </view>

            <!-- 右侧头像 -->
            <view class="avatar-container">
              <image
                :src="room.avatar || '/static/images/default-avatar.png'"
                mode="aspectFit"
                class="avatar"
              />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 房间说明和底部操作按钮 - 左右分布 -->
    <view class="description-actions-container">
      <!-- 房间说明 -->
      <view class="room-description">
        <image src="/static/images/game/roomNote.png" mode="aspectFit" class="note-image"></image>
      </view>

      <!-- 底部操作按钮 -->
      <view class="bottom-actions">
        <image
          src="/static/images/game/f5.png"
          mode="aspectFit"
          class="action-image"
          @click="handleRefresh"
        ></image>
        <image
          src="/static/images/game/empty.png"
          mode="aspectFit"
          class="action-image"
          @click="handleFilter"
        ></image>
      </view>
    </view>

    <!-- 提示弹窗 -->
    <view v-if="showSuccessTip" class="success-tip">
      <view class="tip-content">
        <view class="tip-icon">✓</view>
        <view class="tip-text">已添加到剪贴板</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { getGameRoom } from '@/api/game'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
const userInfo = userStore.userInfo
const route = useRoute()
// 从页面传参中获取gameId，如果没有则使用默认值'轨道音乐'
const gameId = ref(Number(route.query.gameId as unknown))
// 从页面传参中获取gameName，如果没有则使用默认值'轨道音乐'
const gameName = ref((route.query.gameName as string) || '轨道音乐')
// 响应式数据
const showSuccessTip = ref(false)
const searchValue = ref('')
const activeTab = ref(0)
const roomType = ref('')
const roomState = ref('')
// 搜索处理
const handleSearch = () => {
  console.log('搜索关键词:', searchValue.value)
  // 这里可以添加搜索逻辑
}

// 刷新处理
const handleRefresh = () => {
  // 这里可以添加刷新房间列表的逻辑
  roomState.value = ''
  getRoom()
}

// 筛选处理
const handleFilter = () => {
  // 这里可以添加筛选空闲房间的逻辑
  roomState.value = 'EMPTY'
  getRoom()
}

// 清空搜索
const handleClear = () => {
  searchValue.value = ''
  getRoom()
}

// 标签切换处理
const handleTabChange = (index) => {
  console.log('切换到标签:', index)
  // 这里可以根据选中的标签筛选房间数据
  activeTab.value = index.index
  roomType.value =
    activeTab.value === 0
      ? ''
      : activeTab.value === 1
        ? 'BLUE_REGION'
        : activeTab.value === 2
          ? 'RED_REGION'
          : 'YELLOW_REGION'
  getRoom()
}

// 模拟房间数据
const roomsData = ref([])

// 获取能量棒图标
const getEnergyBarIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    BLUE_REGION: '/static/images/rank/blueBang.png',
    RED_REGION: '/static/images/rank/redBang.png',
    YELLOW_REGION: '/static/images/rank/goldBang.png',
  }
  return iconMap[type] || '/static/images/rank/blueBang.png'
}

// 返回按钮处理
const handleBack = () => {
  uni.navigateBack()
}
// 规则处理
const handleRules = () => {
  uni.navigateTo({
    url: '/pages/game/page/gameRule',
  })
}
// 房间点击处理
const handleRoomClick = (room: any) => {
  // 显示成功提示
  showSuccessTip.value = true
  setTimeout(() => {
    showSuccessTip.value = false
  }, 2000)

  // 这里可以添加进入房间的逻辑
  console.log('进入房间:', room)
}
const getRoom = () => {
  roomsData.value = []
  // 动态构建请求参数，只有有值的参数才传递
  const params: any = {
    gameType: gameId.value,
    roomType: roomType.value,
    roomState: roomState.value,
  }
  const roomGrade = '' // 这里可以设置实际的roomGrade值
  if (roomGrade) params.roomGrade = roomGrade
  try {
    getGameRoom(params).then((res) => {
      if (res.code === 200) {
        const room = res.data
        // 将单层数组room转换为两层数组roomsData格式
        const convertToTwoDimensionalArray = (arr) => {
          const result = []
          // 每两个房间为一组
          for (let i = 0; i < arr.length; i += 2) {
            result.push({
              index: Math.floor(i / 2) + 1,
              rooms: arr.slice(i, i + 2),
            })
          }
          return result
        }

        // 转换数据并赋值
        roomsData.value = convertToTwoDimensionalArray(room)
      } else {
        roomsData.value = []
      }
    })
  } catch (error) {
    console.log(error)
  }
}
// 组件挂载时
onShow(() => {
  getRoom()
})
</script>

<style lang="scss">
.game-hall {
  height: calc(100vh - 100rpx);
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;

  // 顶部导航栏
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 10rpx;
    position: relative;
    z-index: 10;

    .back-icon {
      width: 40rpx;
      height: 40rpx;
    }

    .header-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #ffffff;
    }

    .avatar-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      border: 2rpx solid #00ffff;
    }
  }

  // 搜索框
  .search-container {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    padding: 0 10rpx;

    :deep(.wd-search) {
      flex: 1;
      margin-right: 20rpx;
      background: none;
      padding: 0;
    }

    :deep(.wd-search__input-wrapper) {
      height: 60rpx;
      border-radius: 20rpx;
    }

    :deep(.wd-search__input) {
      font-size: 28rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: #ffffff;
      background: #1b66f9;
      border-radius: 10rpx;
    }
    :deep(.wd-search__block) {
      border-radius: 10rpx;
    }
    :deep(.wd-search__search-left-icon) {
      color: #ffffff !important;
      z-index: 10;
    }
    :deep(.wd-search__placeholder-txt) {
      color: #ffffff;
    }
    .search-button {
      width: 80rpx;
      height: 55rpx;
      border: 1rpx solid #00b4e6;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .tab-container {
    display: flex;
    align-items: center;
    justify-content: center;
    .game-rule {
      width: 100rpx;
      height: 80rpx;
    }
  }
  // 分类标签
  :deep(.wd-tabs) {
    margin-bottom: 20rpx;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: none;
  }
  :deep(.wd-tabs__nav) {
    background: none;
  }
  :deep(.wd-tabs__tab-bar) {
    background: transparent;
    padding: 10rpx 0;
  }
  :deep(.wd-tabs__nav-item) {
    color: #fff;
    font-size: 32rpx;
  }
  :deep(.wd-tabs__nav-item.is-active) {
    color: #00ffff;
  }

  // 隐藏默认下划线
  :deep(.wd-tabs__line) {
    display: none !important;
  }

  // 为了更精确控制，调整导航项的样式
  :deep(.wd-tabs__nav-item) {
    position: relative;
    padding: 10rpx 0;
    margin-right: 30rpx;
  }

  // 直接在活跃项内部创建下划线，使其与文字宽度一致
  :deep(.wd-tabs__nav-item.is-active)::after {
    content: '';
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 20rpx); // 宽度略小于导航项，使效果更佳
    height: 4rpx;
    background-color: #00ffff;
  }

  :deep(.wd-tabs__tab-content) {
    padding: 0;
  }

  // 房间网格
  .room-grid {
    margin: 20rpx 0;
    height: calc(100vh - 720rpx); /* 设置固定高度 */
    overflow-y: auto; /* 允许垂直滚动 */
    /* 隐藏滚动条但保留滚动功能（针对部分浏览器） */
    -webkit-overflow-scrolling: touch;
  }

  /* 自定义滚动条样式 */
  .room-grid::-webkit-scrollbar {
    width: 4rpx;
  }

  .room-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2rpx;
  }

  .room-grid::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 230, 0.5);
    border-radius: 2rpx;
  }

  .room-row {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;
    flex-wrap: wrap;
  }

  .room-card {
    width: calc(50% - 10rpx);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 20rpx;
    padding: 15rpx;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    border: 2rpx solid transparent;
    height: 130rpx;
    &.BLUE_REGION {
      background-image: url('/static/images/game/blueRoomBg.png');
    }
    &.RED_REGION {
      background-image: url('/static/images/game/redRoomBg.png');
    }
    &.YELLOW_REGION {
      background-image: url('/static/images/game/yellowRoomBg.png');
    }
    .room-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
    }

    .energy-bar {
      width: 60rpx;
      height: 130rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .room-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 15rpx;

      .room-name {
        font-size: 23rpx;
        font-weight: bold;
        color: #ffffff;
        margin-bottom: 5rpx;
        text-align: left;
        width: 100%;
      }

      .room-status {
        font-size: 23rpx;
        margin-bottom: 5rpx;
        text-align: left;
        width: 100%;
        color: #00ff00;

        &.ongoing {
          color: #ffff00;
        }
        &.full {
          color: #ff0000;
        }
      }

      .room-progress {
        font-size: 23rpx;
        color: rgba(255, 255, 255, 0.8);
        text-align: left;
        width: 100%;
      }
    }

    .avatar-container {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      overflow: hidden;
      border: 2rpx solid #00ffff;
      position: absolute;
      bottom: 30rpx;
      right: 15rpx;
      .avatar {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 房间说明和底部操作按钮容器 - 左右分布
  .description-actions-container {
    display: flex;
    gap: 0;
    align-items: center;
  }

  // 房间说明 - 左侧
  .room-description {
    flex: 1; // 占据较大空间
    .note-image {
      width: 100%;
      height: 300rpx;
      border-radius: 20rpx;
    }
  }

  // 底部操作按钮 - 右侧
  .bottom-actions {
    flex: 1; // 占据较小空间
    display: flex;
    gap: 0;

    .action-image {
      width: 180rpx;
      height: 180rpx;
      border-radius: 40rpx;
      transition: all 0.3s;

      &:active {
        transform: scale(0.95);
      }
    }
  }

  // 成功提示弹窗
  .success-tip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;

    .tip-content {
      background: rgba(0, 0, 0, 0.8);
      border-radius: 20rpx;
      padding: 40rpx 60rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20rpx;

      .tip-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background: linear-gradient(90deg, #52c41a, #73d13d);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48rpx;
        color: #ffffff;
      }

      .tip-text {
        font-size: 32rpx;
        color: #ffffff;
      }
    }
  }
}
</style>
